<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        ul, ol {
            list-style: none;
        }
        img {
            display: block;
        }
        #sports-header{
            width: 100%;
            height: 50px;
            background-color: #537bff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            font-size: 20px;
            padding: 0 10px;
            position: fixed;
            top: 0;
            z-index: 100;
        }
        #sports-main {
            margin-top: 50px;
            height: calc(100vh - 50px);
        }
        #sports-main ul{
            background-color: white;
        }
        #sports-main ul li{
            display: flex;
            border-bottom: 1px #f7f7f7 solid;
            margin: 0 18px;
            padding: 20px 0;
        }        
        #sports-main .sports-list-text{
            flex: 1;
            font-size: 18px;
            line-height: 26px;
        }
        #sports-main .sports-list-text p:last-of-type{
            font-size: 14px;
            color: #828c9b;
            display: flex;
            margin-top: 10px;
        }
        #sports-main .sports-list-text p:last-of-type span{
            margin-right: 10px;
        }        
        #sports-main .sports-sports-list-img{
            width: 130px;
            margin-left: 20px;
        }        
        #sports-main .sports-sports-list-img img{
            width: 100%;
            border-radius: 10px;
        }          
        #loadingDown{
            width: 100%;
            position: absolute;
            top: 60px;
            z-index: -1;
            text-align: center;
        }
        #loadingUp{
            width: 100%;
            text-align: center;
            padding: 20px 0;
        }
        #loading {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin:auto;
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            z-index: 100;
        }
    </style>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script src="https://cdn.bootcdn.net/ajax/libs/better-scroll/2.2.0/better-scroll.js"></script>


</head>
<body>
    <header id="sports-header">
        腾讯 | 宠物
    </header>
    <div id="loadingDown"></div>
    <main id="sports-main">
        <div>
            <ul class="sports-list">
                <li v-for="news in list">
                    <div class="sports-list-text">
                        <p> {{ news.title }}</p>
                        <p>
                            <span>{{ news.comment }}评</span>
                        </p>
                    </div>
                <div class="sports-list-img">
                    <img :src="news.img" alt="">
                </div>
                </li>
            </ul>
            <div id="loadingUp"></div>
        </div>
        <div id="loading"></div>
    </main>
    <script>
        var now = 0;

        // 请求拦截器
        axios.interceptors.request.use(config => {
        // Do something before request is sent
        return config;
        },error => {
        // Do something with request error
        return Promise.reject(error);
        });


        //响应拦截器
        axios.interceptors.response.use(response => {
        // Do something before response is sent
        return response;
        },error => {
        // Do something with response error
        return Promise.reject(error);
        });

        axios.post('/list',
            {
                'page' : 0,
                'count' : 10,
            }
            ).then((res) =>{
                console.log(res);
                if(res.status == 200){
                    v.list = res.data.list;
                }
            })
            /*
        let xhr = new XMLHttpRequest();
        xhr.onload = function() {
            if(xhr.status == 200) {
                let data = JSON.parse(xhr.responseText);
                if(data.errcode == 0) {
                    v.list = data.list;
                }
            }
        }
        xhr.open('POST', '/list');
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify({'page' : 0, "count" : 10}));
*/
        let v = new Vue({
            el: '#sports-main',
			data: {
                list: null,
			}
        });


        function initBetterScroll() {
            let sportsMain = document.querySelector('#sports-main');
            let loadingDown = document.querySelector('#loadingDown');
            let loadingUp = document.querySelector('#loadingUp');
            const bs = new BetterScroll.createBScroll(sportsMain, {
                pullDownRefresh: {
                    threshold: 10,
                },
                pullUpLoad: {
                    threshold: 10,
                },
            });
            bs.on('scrollStart', ()=>{
                loadingDown.innerHTML = '下拉';
                loadingUp.innerHTML = '上拉';
            });
            bs.on('pullingDown', ()=>{
                loadingDown.innerHTML = 'loading...';
                axios.post('/list',
                    {
                        'page' : 0,
                        'count' : 10,
                    }
                    ).then((res) =>{
                        if(res.status == 200){
                            setTimeout( () =>{
                                v.list = res.data.list;
                                loadingDown.innerHTML = '刷新成功';
                                bs.finishPullDown();
                                bs.refresh();     
                                now = 0;
                            }, 1000);
                        }
                    });
            })
            bs.on('pullingUp', ()=>{
                loadingUp.innerHTML = 'loading...';
                axios.post('/list',
                    {
                        'page' : ++now,
                        'count' : 10,
                    }
                    ).then((res) =>{
                        if(res.status == 200){
                            setTimeout( () =>{
                                for(let l of res.data.list)
                                    v.list.push(l);
                                if(res.data.list.length)
                                    loadingUp.innerHTML = '加载成功';
                                else
                                    loadingUp.innerHTML = '没有数据啦';    
                                bs.finishPullUp();
                                bs.refresh();     
                            }, 1000);
                        }
                    });
            })
        }

        initBetterScroll();
    </script>
</body>
</html>